<template>
  <div class="container">
    <div class="title">热点新闻</div>
    <div class="detail">
        <!-- 每一个小图标 -->
      <div class="item" v-for="(item) in picList" :key="item.index">
        <img :src="item.children[0].thumbnail" alt="" v-lazy />
        <div class="text">
          <span class="desc"></span>
          <span class="count"><i class="c1">1.2</i><i class="c2">热度</i></span>
        </div>
      </div>
 </div>
    
  </div>
</template>

<script>
import {getHot} from '@/api'
export default {
  name: "Movie",
  data(){
      return{
         picList:[] 
      }
  },
  async mounted(){
    let result =await getHot()
    if(result.code===200){
        this.picList=result.data.data
    }
    // console.log(result.data.data);
  }
};
</script>

<style lang='less' scoped>
// 外部容器
.container {
  height: 380px;
  width: 100%;
//   background: yellowgreen;
  margin-top: 30px;
  // 标题
  .title {
    height: 30px;
    // background: violet;
    line-height: 30px;
    padding-left: 10px;
    font-size: 15px;
    font-weight: bold;
  }
  .detail{
    width:360px;
    height: 340px;
    margin: 0 auto;
    // background: yellow;
    display: flex;
    flex-wrap: wrap;
    .item{
        // width: 82px;
        height: 160px;
        margin: 10px 5px;
        img{
            width: 80px;
            height: 116px;
            border-radius: 5px;
        }
        .text{
           display: flex;
           flex-direction: column; 
           margin-left: 5px;
           .desc{
               font-size: 12px;
               margin: 5px 5px;
           }
           .count{
               margin-left: 4px;
               font-size: 12px;
                font-weight: bold;
               .c1{
                color: #476cbe;
                font-weight: bold;
               }
               .c2{
                font-size: 12px;
                color: #b9b5b6;
               }
           }
        }
    }
  }
}
</style>
